<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
        #main {
            border: 1px solid #000;
        }
    </style>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 400px"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#main'))

        // 指定图表的配置项和数据
        var option = {
            // 标题
            title: {
                text: '美食排行',
                textStyle: {
                    color: 'deeppink',
                    fontSize: 60,
                },
                subtext: '西兰花排行!!',
                // show: false,
            },
            // 提示框
            tooltip: {
                show: false,
            },
            // 图例组件 控制某个图表是否显示
            legend: {
                data: ['价格'],
                show: false,
            },
            color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                        offset: 0,
                        color: 'yellow', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'red', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            }, ],
            // 图表绘制位置的设置
            grid: {
                left: '30%',
                top: '50%',
            },
            // x轴的设置
            xAxis: {
                data: ['西兰花炒蛋', '盐焗西兰花', '白灼西兰花', '清蒸西兰花', '西兰花炒花菜', '麻辣西兰花'],
                axisLine: {
                    // show: false,
                    lineStyle: {
                        color: 'skyblue',
                        width: 10,
                        type: 'dashed',
                    },
                },
                axisLabel: {
                    fontSize: 10,
                },
            },
            yAxis: {
                axisLine: {
                    // show: false,
                    lineStyle: {
                        color: 'red',
                        width: 10,
                        type: 'dashed',
                    },
                },
                axisLabel: {
                    fontSize: 20,
                },
            },
            // 设置图表的类型 及内容
            series: [{
                name: '价格',
                type: 'line',
                data: [998, 520, 536, 610, 710, 820],
            }, ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>